آموزش Angular & NodeJS - The MEAN Stack Guide [نسخه 2023]

سرفصل ها و درس ها

شروع شدن Getting Started

• معرفی Introduction

• MEAN چیست؟ What is MEAN?

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

• برنامه تک صفحه ای (SPA) چیست؟ What is a Single Page Application (SPA)?

• پشته MEAN چگونه کار می کند؟ How Does the MEAN Stack Work?

• باید بخوانید: Angular CLI - آخرین نسخه MUST READ: Angular CLI - Latest Version

• نصب Node & Angular CLI Installing Node & the Angular CLI

• در حال نصب IDE ما Installing our IDE

• بررسی ساختار پروژه Exploring the Project Structure

• طرح کلی دوره Course Outline

• چگونه از این دوره بیشترین بهره را ببرید How To Get The Most Out Of This Course

• بخش منابع Section Resources

شروع شدن Getting Started

• معرفی Introduction

• MEAN چیست؟ What is MEAN?

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

• برنامه تک صفحه ای (SPA) چیست؟ What is a Single Page Application (SPA)?

• پشته MEAN چگونه کار می کند؟ How Does the MEAN Stack Work?

• باید بخوانید: Angular CLI - آخرین نسخه MUST READ: Angular CLI - Latest Version

• نصب Node & Angular CLI Installing Node & the Angular CLI

• در حال نصب IDE ما Installing our IDE

• بررسی ساختار پروژه Exploring the Project Structure

• طرح کلی دوره Course Outline

• چگونه از این دوره بیشترین بهره را ببرید How To Get The Most Out Of This Course

• بخش منابع Section Resources

The Angular Frontend - درک اصول The Angular Frontend - Understanding the Basics

• معرفی ماژول Module Introduction

• آشنایی با ساختار پوشه Understanding the Folder Structure

• درک اجزای زاویه ای Understanding Angular Components

• اضافه کردن اولین مؤلفه ما Adding our First Component

• گوش دادن به رویدادها Listening to Events

• خروجی محتوا Outputting Content

• دریافت ورودی کاربر Getting User Input

• نصب متریال زاویه ای Installing Angular Material

• افزودن نوار ابزار Adding a Toolbar

• خروجی پست ها Outputting Posts

• فرو رفتن در دستورالعمل های ساختاری Diving Into Structural Directives

• ایجاد پست با Property & Event Binding Creating Posts with Property & Event Binding

• ایجاد یک مدل پست Creating a Post Model

• افزودن فرم ها Adding Forms

• دریافت پست ها از Post-Create به Post-List Getting Posts from Post-Create to Post-List

• تماس گرفتن با دریافت پست Calling GET Post

• اطلاعات بیشتر درباره Observables More About Observables

• در حال کار بر روی فرم ما Working on our Form

• بخش منابع Section Resources

The Angular Frontend - درک اصول The Angular Frontend - Understanding the Basics

• معرفی ماژول Module Introduction

• آشنایی با ساختار پوشه Understanding the Folder Structure

• درک اجزای زاویه ای Understanding Angular Components

• اضافه کردن اولین مؤلفه ما Adding our First Component

• گوش دادن به رویدادها Listening to Events

• خروجی محتوا Outputting Content

• دریافت ورودی کاربر Getting User Input

• نصب متریال زاویه ای Installing Angular Material

• افزودن نوار ابزار Adding a Toolbar

• خروجی پست ها Outputting Posts

• فرو رفتن در دستورالعمل های ساختاری Diving Into Structural Directives

• ایجاد پست با Property & Event Binding Creating Posts with Property & Event Binding

• ایجاد یک مدل پست Creating a Post Model

• افزودن فرم ها Adding Forms

• دریافت پست ها از Post-Create به Post-List Getting Posts from Post-Create to Post-List

• تماس گرفتن با دریافت پست Calling GET Post

• اطلاعات بیشتر درباره Observables More About Observables

• در حال کار بر روی فرم ما Working on our Form

• بخش منابع Section Resources

اضافه کردن NodeJS به پروژه ما Adding NodeJS to our Project

• معرفی ماژول Module Introduction

• اتصال گره و زاویه ای - تئوری Connecting Node & Angular - Theory

• RESTful API چیست؟ What is a RESTful API?

• اضافه کردن Node Backend Adding the Node Backend

• افزودن چارچوب Express Adding the Express Framework

• بهبود کد server.js Improving the server.js Code

• واکشی پست های اولیه Fetching Initial Posts

• استفاده از Angular HTTP Client Using the Angular HTTP Client

• درک CORS Understanding CORS

• اضافه کردن POST Backend Point Adding the POST Backend Point

• افزودن Angular Adding Angular

• بخش منابع Section Resources

اضافه کردن NodeJS به پروژه ما Adding NodeJS to our Project

• معرفی ماژول Module Introduction

• اتصال گره و زاویه ای - تئوری Connecting Node & Angular - Theory

• RESTful API چیست؟ What is a RESTful API?

• اضافه کردن Node Backend Adding the Node Backend

• افزودن چارچوب Express Adding the Express Framework

• بهبود کد server.js Improving the server.js Code

• واکشی پست های اولیه Fetching Initial Posts

• استفاده از Angular HTTP Client Using the Angular HTTP Client

• درک CORS Understanding CORS

• اضافه کردن POST Backend Point Adding the POST Backend Point

• افزودن Angular Adding Angular

• بخش منابع Section Resources

کار با MongoDB Working with MongoDB

• معرفی ماژول Module Introduction

• MongoDB چیست؟ What is MongoDB?

• مقایسه SQL و NoSQL Comparing SQL & NoSQL

• اتصال Angular به پایگاه داده Connecting Angular to a Database

• راه اندازی MongoDB Setting Up MongoDB

• با استفاده از MongoDB Atlas & IP Whitelist Using MongoDB Atlas & IP Whitelist

• اضافه کردن Mongoose Adding Mongoose

• درک طرحواره ها و مدل های Mongoose Understanding Mongoose Schemas & Models

• ایجاد یک نمونه POST Creating a POST Instance

• اتصال برنامه Node Express ما به MongoDB Connecting our Node Express App to MongoDB

• ذخیره سازی داده ها در پایگاه داده Storing Data in a Database

• واکشی داده ها از پایگاه داده Fetching Data From a Database

• تبدیل داده های پاسخ Transforming Response Data

• حذف اسناد Deleting Documents

• به روز رسانی Frontend پس از حذف پست ها Updating the Frontend after Deleting Posts

• افزودن پست با شناسه Adding Posts with an ID

• بخش منابع Section Resources

کار با MongoDB Working with MongoDB

• معرفی ماژول Module Introduction

• MongoDB چیست؟ What is MongoDB?

• مقایسه SQL و NoSQL Comparing SQL & NoSQL

• اتصال Angular به پایگاه داده Connecting Angular to a Database

• راه اندازی MongoDB Setting Up MongoDB

• با استفاده از MongoDB Atlas & IP Whitelist Using MongoDB Atlas & IP Whitelist

• اضافه کردن Mongoose Adding Mongoose

• درک طرحواره ها و مدل های Mongoose Understanding Mongoose Schemas & Models

• ایجاد یک نمونه POST Creating a POST Instance

• اتصال برنامه Node Express ما به MongoDB Connecting our Node Express App to MongoDB

• ذخیره سازی داده ها در پایگاه داده Storing Data in a Database

• واکشی داده ها از پایگاه داده Fetching Data From a Database

• تبدیل داده های پاسخ Transforming Response Data

• حذف اسناد Deleting Documents

• به روز رسانی Frontend پس از حذف پست ها Updating the Frontend after Deleting Posts

• افزودن پست با شناسه Adding Posts with an ID

• بخش منابع Section Resources

تقویت اپلیکیشن Enhancing the App

• معرفی ماژول Module Introduction

• اضافه کردن مسیریابی Adding Routing

• پیوندهای یک ظاهر طراحی شده Styling Links

• سمت کلاینت در مقابل مسیریابی سمت سرور Client Side vs Server Side Routing

• خطای احتمالی Possible Error

• ایجاد فرم "ویرایش". Creating the "edit" Form

• اتمام ویژگی ویرایش Finishing the Edit Feature

• به روز رسانی پست ها در سرور Updating Posts on the Server

• سازماندهی مجدد مسیرهای باطن Re-Organizing Backend Routes

• اضافه کردن Loading Spinners Adding Loading Spinners

• بخش منابع Section Resources

تقویت اپلیکیشن Enhancing the App

• معرفی ماژول Module Introduction

• اضافه کردن مسیریابی Adding Routing

• پیوندهای یک ظاهر طراحی شده Styling Links

• سمت کلاینت در مقابل مسیریابی سمت سرور Client Side vs Server Side Routing

• خطای احتمالی Possible Error

• ایجاد فرم "ویرایش". Creating the "edit" Form

• اتمام ویژگی ویرایش Finishing the Edit Feature

• به روز رسانی پست ها در سرور Updating Posts on the Server

• سازماندهی مجدد مسیرهای باطن Re-Organizing Backend Routes

• اضافه کردن Loading Spinners Adding Loading Spinners

• بخش منابع Section Resources

اضافه کردن آپلود تصویر به برنامه ما Adding Image Uploads to our App

• معرفی ماژول Module Introduction

• اضافه کردن دکمه ورودی فایل Adding the File Input Button

• تبدیل فرم از یک الگوی رانده شده به یک رویکرد واکنشی Converting the Form from a Template Driven to a Reactive Approach

• افزودن کنترل های تصویر برای ذخیره تصویر Adding Image Controls to Store the Image

• افزودن پیش نمایش تصویر Adding an Image Preview

• با اعتبارسنجی Mime-Type شروع کنید Starting with the Mime-Type Validator

• اتمام اعتبارسنجی تصویر Finishing the Image Validator

• اضافه کردن آپلود سمت سرور Adding Server Side Upload

• آپلود فایل ها Uploading Files

• کار با URL فایل Working with the File URL

• مراقب اپراتور Spread (...) باشید Beware of the Spread (...) Operator

• واکشی تصاویر در Frontend Fetching Images on the Frontend

• به روز رسانی پست ها با تصاویر Updating Posts with Images

• بسته شدن Wrap Up

• بخش منابع Section Resources

اضافه کردن آپلود تصویر به برنامه ما Adding Image Uploads to our App

• معرفی ماژول Module Introduction

• اضافه کردن دکمه ورودی فایل Adding the File Input Button

• تبدیل فرم از یک الگوی رانده شده به یک رویکرد واکنشی Converting the Form from a Template Driven to a Reactive Approach

• افزودن کنترل های تصویر برای ذخیره تصویر Adding Image Controls to Store the Image

• افزودن پیش نمایش تصویر Adding an Image Preview

• با اعتبارسنجی Mime-Type شروع کنید Starting with the Mime-Type Validator

• اتمام اعتبارسنجی تصویر Finishing the Image Validator

• اضافه کردن آپلود سمت سرور Adding Server Side Upload

• آپلود فایل ها Uploading Files

• کار با URL فایل Working with the File URL

• مراقب اپراتور Spread (...) باشید Beware of the Spread (...) Operator

• واکشی تصاویر در Frontend Fetching Images on the Frontend

• به روز رسانی پست ها با تصاویر Updating Posts with Images

• بسته شدن Wrap Up

• بخش منابع Section Resources

اضافه کردن صفحه بندی Adding Pagination

• معرفی ماژول Module Introduction

• افزودن مولفه صفحه بندی Adding the Pagination Component

• کار بر روی باطن صفحه بندی Working on the Pagination Backend

• اتصال Angular Paginator به Backend Connecting the Angular Paginator to the Backend

• واکشی صحیح پست ها Fetching Posts Correctly

• پایان کار Finishing Touches

• بخش منابع Section Resources

اضافه کردن صفحه بندی Adding Pagination

• معرفی ماژول Module Introduction

• افزودن مولفه صفحه بندی Adding the Pagination Component

• کار بر روی باطن صفحه بندی Working on the Pagination Backend

• اتصال Angular Paginator به Backend Connecting the Angular Paginator to the Backend

• واکشی صحیح پست ها Fetching Posts Correctly

• پایان کار Finishing Touches

• بخش منابع Section Resources

افزودن احراز هویت کاربر Adding User Authentication

• معرفی ماژول Module Introduction

• افزودن فیلدهای ورودی ورود Adding the Login Input Fields

• مدیریت ورودی کاربر Handling User Input

• افزودن صفحه ثبت نام Adding the Signup Screen

• ایجاد مدل کاربر Creating the User Model

• ایجاد یک کاربر جدید در صورت درخواست Creating a New User Upon Request

• اتصال Angular به Backend Connecting Angular to the Backend

• درک احراز هویت SPA Understanding SPA Authentication

• اجرای احراز هویت SPA Implementing SPA Authentication

• ارسال توکن به Frontend Sending the Token to the Frontend

• افزودن میان افزار برای محافظت از مسیرها Adding Middleware to Protect Routes

• افزودن توکن به احراز هویت درخواست ها Adding the Token to Authenticate Requests

• بهبود سربرگ UI برای انعکاس وضعیت احراز هویت Improving the UI Header to Reflect the Authentication Status

• بهبود پیام‌های رابط کاربری برای انعکاس وضعیت احراز هویت Improving the UI Messages to Reflect the Authentication Status

• اتصال دکمه خروج به وضعیت احراز هویت Connecting the Logout Button to the Authentication Status

• تغییر مسیر کاربران Redirecting Users

• اضافه کردن محافظان مسیر Adding Route Guards

• انعکاس انقضای توکن در UI Reflecting the Token Expiration in the UI

• ذخیره توکن در محل ذخیره سازی Saving the Token in the Local Storage

• بخش منابع Section Resources

افزودن احراز هویت کاربر Adding User Authentication

• معرفی ماژول Module Introduction

• افزودن فیلدهای ورودی ورود Adding the Login Input Fields

• مدیریت ورودی کاربر Handling User Input

• افزودن صفحه ثبت نام Adding the Signup Screen

• ایجاد مدل کاربر Creating the User Model

• ایجاد یک کاربر جدید در صورت درخواست Creating a New User Upon Request

• اتصال Angular به Backend Connecting Angular to the Backend

• درک احراز هویت SPA Understanding SPA Authentication

• اجرای احراز هویت SPA Implementing SPA Authentication

• ارسال توکن به Frontend Sending the Token to the Frontend

• افزودن میان افزار برای محافظت از مسیرها Adding Middleware to Protect Routes

• افزودن توکن به احراز هویت درخواست ها Adding the Token to Authenticate Requests

• بهبود سربرگ UI برای انعکاس وضعیت احراز هویت Improving the UI Header to Reflect the Authentication Status

• بهبود پیام‌های رابط کاربری برای انعکاس وضعیت احراز هویت Improving the UI Messages to Reflect the Authentication Status

• اتصال دکمه خروج به وضعیت احراز هویت Connecting the Logout Button to the Authentication Status

• تغییر مسیر کاربران Redirecting Users

• اضافه کردن محافظان مسیر Adding Route Guards

• انعکاس انقضای توکن در UI Reflecting the Token Expiration in the UI

• ذخیره توکن در محل ذخیره سازی Saving the Token in the Local Storage

• بخش منابع Section Resources

مجوز Authorization

• معرفی ماژول Module Introduction

• اضافه کردن یک مرجع به مدل Adding a Reference to the Model

• افزودن شناسه کاربری به پست ها Adding the User ID to Posts

• نحو Mongoose تغییر کرد Changed Mongoose Syntax

• حفاظت از منابع با مجوز Protecting Resources with Authorization

• ارسال شناسه کاربری به Frontend Passing the User ID to the Frontend

• با استفاده از شناسه کاربری در Frontend Using the User ID on the Frontend

• بخش منابع Section Resources

مجوز Authorization

• معرفی ماژول Module Introduction

• اضافه کردن یک مرجع به مدل Adding a Reference to the Model

• افزودن شناسه کاربری به پست ها Adding the User ID to Posts

• نحو Mongoose تغییر کرد Changed Mongoose Syntax

• حفاظت از منابع با مجوز Protecting Resources with Authorization

• ارسال شناسه کاربری به Frontend Passing the User ID to the Frontend

• با استفاده از شناسه کاربری در Frontend Using the User ID on the Frontend

• بخش منابع Section Resources

رسیدگی به خطاها Handling Errors

• معرفی ماژول Module Introduction

• آزمایش مکان های مختلف برای رسیدگی به خطاها Testing Different Places to Handle Errors

• رهگیر خطا The Error Interceptor

• نمایش دیالوگ خطای اساسی Displaying the Basic Error Dialog

• افزودن دیالوگ خطا Adding an Error Dialog

• بازگرداندن پیغام های خطا روی سرور Returning Error Messages on the Server

• پایان کار Finishing Touches

• بخش منابع Section Resources

رسیدگی به خطاها Handling Errors

• معرفی ماژول Module Introduction

• آزمایش مکان های مختلف برای رسیدگی به خطاها Testing Different Places to Handle Errors

• رهگیر خطا The Error Interceptor

• نمایش دیالوگ خطای اساسی Displaying the Basic Error Dialog

• افزودن دیالوگ خطا Adding an Error Dialog

• بازگرداندن پیغام های خطا روی سرور Returning Error Messages on the Server

• پایان کار Finishing Touches

• بخش منابع Section Resources

بهینه سازی ها Optimizations

• معرفی ماژول Module Introduction

• استفاده از کنترلرها Using Controllers

• جداسازی میان افزار Separating the Middleware

• ایجاد یک ماژول مواد زاویه ای Creating an Angular Material Module

• تقسیم برنامه به ماژول های ویژگی Splitting the App Into Feature Modules

• رفع اشکال به روز رسانی Fixing an Update Bug

• ایجاد ماژول Auth Creating the Auth Module

• اضافه کردن Lazy Loading Adding Lazy Loading

• تعمیر AuthGuard Fixing the AuthGuard

• با استفاده از پیکربندی زاویه ای جهانی Using a Global Angular Config

• استفاده از متغیرهای محیط گره Using Node Environment Variables

• بخش منابع Section Resources

بهینه سازی ها Optimizations

• معرفی ماژول Module Introduction

• استفاده از کنترلرها Using Controllers

• جداسازی میان افزار Separating the Middleware

• ایجاد یک ماژول مواد زاویه ای Creating an Angular Material Module

• تقسیم برنامه به ماژول های ویژگی Splitting the App Into Feature Modules

• رفع اشکال به روز رسانی Fixing an Update Bug

• ایجاد ماژول Auth Creating the Auth Module

• اضافه کردن Lazy Loading Adding Lazy Loading

• تعمیر AuthGuard Fixing the AuthGuard

• با استفاده از پیکربندی زاویه ای جهانی Using a Global Angular Config

• استفاده از متغیرهای محیط گره Using Node Environment Variables

• بخش منابع Section Resources

استقرار برنامه ما Deploying our App

• معرفی ماژول Module Introduction

• گزینه های استقرار Deployment Options

• استقرار REST API Deploying the REST API

• استقرار REST Api Deploying the REST Api

• استقرار Angular Deploying Angular

• Angular Deployment - پایان راه اندازی دو برنامه Angular Deployment - Finishing the Two App Setup

• با استفاده از رویکرد یکپارچه Using the Integrated Approach

• بخش منابع Section Resources

استقرار برنامه ما Deploying our App

• معرفی ماژول Module Introduction

• گزینه های استقرار Deployment Options

• استقرار REST API Deploying the REST API

• استقرار REST Api Deploying the REST Api

• استقرار Angular Deploying Angular

• Angular Deployment - پایان راه اندازی دو برنامه Angular Deployment - Finishing the Two App Setup

• با استفاده از رویکرد یکپارچه Using the Integrated Approach

• بخش منابع Section Resources

خلاصه دوره Course Roundup

• با تشکر از حضور در دوره! Thanks for being part of the course!

• افزودن احتمالی: سوکت های وب را برای تازه سازی بیدرنگ اضافه کنید Possible Addition: Add Web Sockets for Realtime Refresh

• امتیاز: محتوای بیشتر! Bonus: More Content!

خلاصه دوره Course Roundup

• با تشکر از حضور در دوره! Thanks for being part of the course!

• افزودن احتمالی: سوکت های وب را برای تازه سازی بیدرنگ اضافه کنید Possible Addition: Add Web Sockets for Realtime Refresh

• امتیاز: محتوای بیشتر! Bonus: More Content!